<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/panel/panel,$model/UI2/system/components/justep/panel/child,$model/UI2/system/components/justep/button/buttonGroup,$model/UI2/system/components/justep/button/checkbox,$model/UI2/system/components/justep/contents/content,$model/UI2/system/components/justep/windowDialog/windowDialog,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/contents/contents,$model/UI2/system/components/justep/titleBar/titleBar,$model/UI2/system/components/justep/button/button,">  
  <span xmlns="" component="$model/UI2/system/components/justep/windowDialog/windowDialog" xid="windowDialog" data-bind="component:{name:'$model/UI2/system/components/justep/windowDialog/windowDialog'}" data-config="{&quot;src&quot;:&quot;$model/UI2/system/components/justep/common/demo/dialog.w&quot;}"> 
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog-overlay"></div>  
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog">  
      <div class="x-dialog-title"> 
        <button class="close"> 
          <span>×</span> 
        </button>  
        <div class="x-dialog-title-text"/> 
      </div>  
      <div class="x-dialog-body"/> 
    </div> 
  </span>  
  <div xmlns="" component="$model/UI2/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1" data-bind="component:{name:'$model/UI2/system/components/justep/panel/panel'}"> 
    <div class="x-panel-top" xid="top1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar3" data-bind="component:{name:'$model/UI2/system/components/justep/titleBar/titleBar'}" data-config="{&quot;title&quot;:&quot;contents&quot;}"> 
        <div class="x-titlebar-left" xid="div7"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button8" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:closeWin" data-config="{&quot;icon&quot;:&quot;icon-chevron-left&quot;}"> 
            <i xid="i5" class="icon-chevron-left"/>  
            <span xid="span6"/> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div8">contents</div>  
        <div class="x-titlebar-right " xid="div9"> 
          <div class="empty"/>  
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="prevBtn" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:prevBtnClick" data-config="{&quot;label&quot;:&quot;prev&quot;}"> 
            <i/>  
            <span>prev</span> 
          </a>  
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="nextBtn" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:nextBtnClick" data-config="{&quot;label&quot;:&quot;next&quot;}"> 
            <i/>  
            <span>next</span> 
          </a> 
        </div> 
      </div> 
    </div>  
    <div class="x-panel-content" xid="content1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/contents/contents" xid="pages" class="x-contents x-full" data-bind="component:{name:'$model/UI2/system/components/justep/contents/contents'}" data-events="onActiveChange:pagesSlide" data-config="{&quot;active&quot;:0,&quot;slidable&quot;:true,&quot;swipe&quot;:true,&quot;wrap&quot;:true}"> 
        <div class="x-contents-content active" xid="content-1" component="$model/UI2/system/components/justep/contents/content" data-bind="component:{name:'$model/UI2/system/components/justep/contents/content'}" data-events="onActive:contentsActive"> 
          <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">contents</h3>  
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="jsSource" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:showJsSource" data-config="{&quot;label&quot;:&quot;js&quot;}"> 
            <i xid="jsSou"/>  
            <span>js</span> 
          </a>  
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="source" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:isVisible" data-events="onClick:showContentsSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
            <i xid="sou"/>  
            <span>源码</span> 
          </a>  
          <br/>  
          <p>1、容器组件，多个contents之间可任意切换</p>  
          <p>2、可以将同一类数据放到一个contents中</p>  
          <p>3、左右滑动可切换页面</p>  
          <p> 
            <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" name="checkbox" value="1" label="是否使用滑动动画" xid="slideControl" checked="true" data-config="{&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;label&quot;:&quot;是否使用滑动动画&quot;,&quot;name&quot;:&quot;checkbox&quot;,&quot;value&quot;:&quot;1&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}" data-events="onChange:checkboxChanged"> 
              <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox" name="checkbox" value="1"></input>  
              <label xmlns:xhtml="http://www.w3.org/1999/xhtml">是否使用滑动动画</label> 
            </span>  
            <span component="$model/UI2/system/components/justep/button/checkbox" class="x-checkbox" name="checkbox" value="1" label="是否循环" xid="wrapControl" checked="true" data-config="{&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;label&quot;:&quot;是否循环&quot;,&quot;name&quot;:&quot;checkbox&quot;,&quot;value&quot;:&quot;1&quot;}" data-bind="component:{name:'$model/UI2/system/components/justep/button/checkbox'}" data-events="onChange:wrapControlChanged"> 
              <input xmlns:xhtml="http://www.w3.org/1999/xhtml" type="checkbox" name="checkbox" value="1"></input>  
              <label xmlns:xhtml="http://www.w3.org/1999/xhtml">是否循环</label> 
            </span> 
          </p>  
          <div style="text-align:center;"> 
            <h1>page 1</h1>  
            <a component="$model/UI2/system/components/justep/button/button" xid="button2" class="btn btn-default btn-lg" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:goNextPage" data-config="{&quot;label&quot;:&quot;go&quot;}"> 
              <i/>  
              <span>go</span> 
            </a> 
          </div> 
        </div>  
        <div class="x-contents-content" xid="content-2" component="$model/UI2/system/components/justep/contents/content" data-bind="component:{name:'$model/UI2/system/components/justep/contents/content'}" data-events="onInactive:contentsUnActive"> 
          <div style="text-align:center"> 
            <h1>page 2</h1>  
            <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default btn-lg " xid="button3" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:backPrePage" data-config="{&quot;label&quot;:&quot;back&quot;}"> 
              <i/>  
              <span>back</span> 
            </a>  
            <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default btn-lg " xid="button4" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:nextPage" data-config="{&quot;label&quot;:&quot;next&quot;}"> 
              <i/>  
              <span>next</span> 
            </a> 
          </div> 
        </div>  
        <div class="x-contents-content" xid="content-3" component="$model/UI2/system/components/justep/contents/content" data-bind="component:{name:'$model/UI2/system/components/justep/contents/content'}"> 
          <div style="text-align:center"> 
            <h1 xid="h31">page 3</h1>  
            <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default btn-lg " xid="button1" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:backPage" data-config="{&quot;label&quot;:&quot;back&quot;}"> 
              <i/>  
              <span>back</span> 
            </a> 
          </div> 
        </div> 
      </div> 
    </div>  
    <div class="x-panel-bottom" xid="bottom1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/button/buttonGroup" class="btn-group btn-group-justified" xid="buttonGroup2" data-bind="component:{name:'$model/UI2/system/components/justep/button/buttonGroup'}" data-config="{&quot;tabbed&quot;:true}"> 
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button9" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-config="{&quot;label&quot;:&quot;page1&quot;,&quot;target&quot;:&quot;content-1&quot;}"> 
          <i xid="i6"/>  
          <span xid="span7">page1</span> 
        </a>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button10" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-config="{&quot;label&quot;:&quot;page2&quot;,&quot;target&quot;:&quot;content-2&quot;}"> 
          <i xid="i7"/>  
          <span xid="span8">page2</span> 
        </a>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button11" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-config="{&quot;label&quot;:&quot;page3&quot;,&quot;target&quot;:&quot;content-3&quot;}"> 
          <i xid="i8"/>  
          <span xid="span9">page3</span> 
        </a> 
      </div> 
    </div>  
    <div id="aler"/> 
  </div> 
</div>
